<template>
    <div class="headerwrap wrap">
        <h1>
            <img src="../assets/img/indexLogo.6f8ac4f0.png" alt="" />
        </h1>
        <ul class="navs">
            <li :class="{ active: route.path == '/home' }" @click="router.push('/home')">
                首页
            </li>
            <li :class="{ active: route.path == '/goods' }" @click="router.push('/goods')">
                全部商城
            </li>
            <li :class="{ active: route.path == '/user' }" @click="router.push('/user')">
                个人中心
            </li>
            <li :class="{ active: route.path == '/order' }" @click="router.push('/order')">
                我的订单
            </li>
            <li :class="{ active: route.path == '/free' }" @click="router.push('/free')">
                专属福利
            </li>
        </ul>
        <div class="search">
            <input type="text" name="" id="" placeholder="请输入关键字" v-model="keyword" />
            <span @click="toGoods"><img src="../assets/img/search.png" alt="" /></span>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter()
const route = useRoute()
const keyword = ref('')

const toGoods = () => {
    router.push(`/goods?keyword=${keyword.value}`);
}
</script>

<style scoped lang="less">
.headerwrap {
    display: flex;
    justify-content: space-between;
    height: 118px;
    align-items: center;
    font-size: 16px;
    font-weight: 500;

    .navs {
        width: 500px;
        display: flex;
        justify-content: space-between;
        li{
          cursor: pointer;
        }
        .active {
            color: #0a328e;
        }
    }

    .search {
        display: flex;
        align-items: center;

        input {
            width: 214px;
            height: 40px;
            border-radius: 20px 0px 0px 20px;
            border: 1px solid #dedede;
            padding-left: 20px;
            box-sizing: border-box;
        }

        span {
            width: 50px;
            height: 40px;
            background: #0a328e;
            border-radius: 0px 20px 20px 0px;
            text-align: center;
            line-height: 40px;
        }
    }
}
</style>
